import { queryUserList } from '@/services/demo/UserController';
import React from 'react';
/**
 * 高阶组件：对组件增强，解决类组件的状态逻辑复用问题
 * 1. 接收一个组件作为参数，返回一个新的组件
 * 2. 新的组件可以在原组件的基础上修改原组件的props和state
 *
 * 高阶组件的缺点：
 * 1. 会增加组件的层级，增加组件的复杂度
 * 2. 会增加组件的渲染次数，增加组件的性能消耗
 *
 * ，比如在componentDidMount中可能要处理：
 * 1. ajax获取数据
 * 2. 设置一些真实dom
 * 3. 设置页面标题
 * 4. 启动定时器
 *
 * 但是从1到4的逻辑是没有耦合的，不应该放到一起，更好的做法是：
 * 1. ajax获取数据：useFetchData
 * 2. 设置一些真实dom：useRealDom
 * 3. 设置页面标题：useTitle
 * 4. 启动定时器：useTimer
 */
export function withFetchData(Comp: any) {
  return class withFetchDataWrapper extends React.Component {
    state = {
      data: [],
    };
    async componentDidMount() {
      const resp = await queryUserList({
        current: 0,
        pageSize: 10,
      });
      this.setState({ data: resp?.data?.list ?? [] });
    }
    render() {
      return <Comp {...this.props} data={this.state.data} />;
    }
  };
}

export class RenderPropsFetchData extends React.Component {
  state = { data: [] };
  async componentDidMount() {
    const resp = await queryUserList({
      current: 0,
      pageSize: 10,
    });
    this.setState({ data: resp?.data?.list ?? [] });
  }
  render() {
    if (typeof this.props.render === 'function') {
      return this.props.render(this.state.data);
    }
    return null;
  }
}
